
<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">创建新的班级</el-button>

    <!-- 新建班级对话框 -->
    <el-dialog v-model="dialogVisible" title="创建班级" width="30%">
      <el-form :model="form" label-width="100px">
        <el-form-item label="班级编号">
          <el-input v-model="form.class_id" />
        </el-form-item>
        <el-form-item label="班级名称">
          <el-input v-model="form.class_name" />
        </el-form-item>
        <el-form-item label="负责教师">
          <el-input v-model="form.teacher_id" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="createClass">提交</el-button>
      </template>
    </el-dialog>
    <el-table :data="classList" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="class_id" label="班级编号" width="180" />
      <el-table-column prop="class_name" label="班级名称" />
      <el-table-column prop="teacher_id" label="负责教师" />

      <!-- 👇 新增：操作列 -->
      <el-table-column label="操作" width="240">
        <template #default="scope">
          <el-button type="primary" size="small" @click="toggleExpand(scope.row.class_id)">
            {{ expandedClassId === scope.row.class_id ? '收起学生' : '查看学生' }}
          </el-button>

          <el-upload
              :http-request="(option) => handleUpload(option, scope.row.class_id)"
              accept=".xlsx,.xls"
              :show-file-list="false"
          >
            <el-button size="small" type="success" style="margin-left: 10px">导入学生</el-button>
          </el-upload>
        </template>
      </el-table-column>
    </el-table>
    <!-- ✅ 学生列表展示表格：加在班级表格“之后” -->
    <el-table
        v-if="expandedClassId"
        :data="studentList"
        style="margin-top: 20px;"
        border
    >
      <el-table-column prop="studentId" label="学号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="gender" label="性别" />
      <el-table-column prop="college" label="学院" />
      <el-table-column prop="department" label="系" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)

const form = ref({
  class_id: '',
  class_name: '',
  teacher_id: ''
})

const classList = ref([])

// 提交班级信息
const createClass = async () => {
  try {
    await axios.post('/api/classes', form.value)
    dialogVisible.value = false
    fetchClassList() // 重新加载数据
  } catch (err) {
    console.error('创建班级失败', err)
  }
}

// 获取所有班级
const fetchClassList = async () => {
  try {
    const res = await axios.get('/api/classes')
    classList.value = res.data
  } catch (err) {
    console.error('获取班级列表失败', err)
  }
}
const handleUpload = async (option, classId) => {
  const formData = new FormData()
  formData.append('file', option.file)
  formData.append('classId', classId) // 🔥 传递给后端当前班级ID

  try {
    await axios.post('/api/students/import', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })
    ElMessage.success('导入成功')
  } catch (err) {
    ElMessage.error('导入失败')
    console.error(err)
  }
}
const expandedClassId = ref(null)
const studentList = ref([])

const toggleExpand = async (classId) => {
  if (expandedClassId.value === classId) {
    expandedClassId.value = null
    studentList.value = []
    return
  }

  expandedClassId.value = classId

  try {
    const res = await axios.get(`/api/students/by-class/${classId}`)
    studentList.value = res.data
  } catch (err) {
    ElMessage.error('加载学生失败')
    console.error(err)
  }
}

// 初始化加载
onMounted(() => {
  fetchClassList()
})
</script>
